//入门
import './style/index.less';
import webglUtils from './ThirdParty/webgl-utils';

import VS from './Shaders/demo1VS.glsl';
import FS from './Shaders/demo1FS.glsl';
const canvas = document.getElementById("canvas");
const gl = canvas.getContext('webgl2');
if (!gl) {
    console.log('webgl2 not supported');
}
//调整分辨率与canvas大小相等
webglUtils.resizeCanvasToDisplaySize(gl.canvas);

const vs = createShader(gl, gl.VERTEX_SHADER, VS);
const fs = createShader(gl, gl.FRAGMENT_SHADER, FS);
const program = createProgram(gl, vs, fs);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
let positions = [];
const rectangleCount = 10000;
const vertexCount = rectangleCount * 6;
for (let i = 0; i < rectangleCount; i++) {
    const center = [Math.random() * canvas.width, Math.random() * canvas.height];
    const width = Math.random() * 50;
    const height = Math.random() * 30;
    positions.push(
        center[0] - width / 2, center[1] + height / 2,
        center[0] - width / 2, center[1] - height / 2,
        center[0] + width / 2, center[1] - height / 2,

        center[0] - width / 2, center[1] + height / 2,
        center[0] + width / 2, center[1] - height / 2,
        center[0] + width / 2, center[1] + height / 2);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(positionAttributeLocation);

const size = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
let offset = 0;

gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

//调整webgl画布大小与canvas大小相等
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
const colorUniformLocation = gl.getUniformLocation(program, "u_color");
gl.useProgram(program);
//uniform一定要在useProgram之后传入
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
gl.uniform4f(colorUniformLocation, 1, 0, 0, 1);

const primitiveType = gl.TRIANGLES;
offset = 0;
gl.drawArrays(primitiveType, offset, vertexCount);

function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
        return shader;
    }

    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
}

function createProgram(gl, vertexShader, fragmentShader) {
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    const success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
        return program;
    }

    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}